$(function () {//在页面内容都加载完成后才执行的
    var total = 0; //博客总数量
    var blog = {}; //博客
    var laypage = layui.laypage; //layui分页插件

    //默认的分页查询
    function defaultSelectPage(){
        axios.post("http://localhost:8081/kun/foreign/index/defaultSelectPage").then(res => {
            total = res.data.data.totalNum;
            var ul = $("#blogListUl");
            var blogList = res.data.data.blogList;
            publicMethod(ul,blogList);
        });
    }

    //分页查询
    function SelectPage(current) {
        axios.post("http://localhost:8081/kun/foreign/index/selectPage?current="+current).then(res => {
            empty(res);
        });
    }

    //将原先内容清空，并添加新的内容
    function empty(res) {
        var ul = $("#blogListUl");
        ul.empty();//将之前的内容清除
        var blogList = res.data.data.blogList;
        publicMethod(ul,blogList);
    }

    //公有的方法
    function publicMethod(ul,blogList) {
        //将后端传送过来的日期进行格式化，也就是对toString进行重写
        Date.prototype.toString = function () {
            return this.getFullYear() + "年" + (this.getMonth() + 1) + "月" + this.getDate() + "日 ";
        };
        $(blogList).each(function (index) {
            var date = new Date(blogList[index].releaseDate);
            var li =
                "<li style='margin-bottom: 30px'>" +
                "<span class='date'>" +
                "<a href='foreign/blog/view.html?id="+blogList[index].id+"'>" + date + "</a>" +
                "</span>" +
                "<span>" +
                "<a href='foreign/blog/view.html?id="+blogList[index].id+"' style='color: #333;font-weight: bold;'>" + blogList[index].title + "</a>" +
                "</span>" +
                "<span class='summary'>" + blogList[index].summary + "</span>" +
                "<span class='info'>发表于" +
                "<span>" + date + "</span>" +
                "阅读(<span>" + blogList[index].clickHit + "</span>) 评论(<span>" + blogList[index].replyHit + ")</span>" +
                "</span>" +
                "<hr style='height: 5px; border: none; border-top: 1px dashed gray; padding-bottom: 10px;background: white;'/>" +
                "</li>";
            ul.append(li);
        });
    }

    //默认的分页查询
    defaultSelectPage();

    //按日志类别
    axios.get("http://localhost:8081/kun/foreign/blogType/queryBlogTypeAndCount").then(res=>{
        var blogTypeList = $("#blogTypeList");
        var blogTypes = res.data.data.blogTypes;
        $(blogTypes).each(function (index) {
            var id = blogTypes[index].id;
            var li = "<li><span><a href='#' data-id='"+id+"' style='color: #337ab7'>"+blogTypes[index].typeName+
                " ("+blogTypes[index].blogCount+")</a></span></li>";
            //将每一个li标签追加到ul标签
            $(blogTypeList).append(li);
        });
        blogTypeList.find("li span a").click(function () {
            var that = $(this);
            blog.typeId = that.attr("data-id");
            queryBlogByPage(blog,1);// "1"代表按日志类别
        });
    });

    //按日志日期
    axios.get("http://localhost:8081/kun/foreign/blog/queryReleaseDateAndCount").then(res=>{
        var blogList = $("#dateList");
        var blogs = res.data.data.blogs;
        //循环遍历json数组
        $(blogs).each(function (index) {
            var releaseDateStr = blogs[index].releaseDateStr;
            var li = "<li><span><a href='#' data-date='"+releaseDateStr +"'"+
                "style='color: #337ab7'>"+blogs[index].releaseDateStr+"("+blogs[index].blogCount+")</a></span></li>";
            //将每一个li标签追加到ul标签
            $(blogList).append(li);
        });
        blogList.find("li span a").click(function () {
            var that = $(this);
            blog.releaseDateStr = that.attr("data-date");
            queryBlogByPage(blog,2);//"2"代表按日志日期
        });
    });

    $(document).ready(function () {
        //按博客类型进行查询
        $('#home li a').click(function () {
            blog.typeId = Number($(this).attr("data-typeId"));
            var index = chooseNumber(blog.typeId);
            queryBlogByPage(blog,index);
        })
    })

    //选择数字
    function chooseNumber(index) {
        var indexNumber =  index + 2;
        switch (index) {
            case 1 : return indexNumber; break; //"3"代表Java
            case 2 : return indexNumber; break; //"4"代表大数据
            case 3 : return indexNumber; break; //"5"代表流行框架
        }
    }

    //延迟加载分页插件出现的顺序，为了拿取异步请求响应的数据
    setTimeout(function () {
        layuiPage(total)
    },200);

    /**
     * layui分页插件
     * @param total 博客总数量
     * @param index 下标
     * 说明: 为了区别博客全部内容进行分页查询 和 按博客类型或者日期进行分页查询
     * 需要传递index，确保它是 按博客类型或者日期进行分页查询
     */
    function layuiPage(total,index) {
        //完整功能
        laypage.render({
            elem: 'pageCode',
            count: total,
            first: '首页',
            last: '尾页',
            limit: 5,
            layout: ['count', 'prev', 'page', 'next', 'refresh', 'skip'],
            jump: function(obj, first){//jump - 切换分页的回调
                //当分页被切换时触发，函数返回两个参数：obj（当前分页的所有选项值）、first（是否首次，一般用于初始加载的判断）
                //obj包含了当前分页的所有参数，比如：
                //console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
                //console.log(obj.limit); //得到每页显示的条数
                //首次不执行
                if(!first){
                    if(!index) {
                        SelectPage(obj.curr);
                    }
                    else {
                        queryBlogBySelectPage(blog,obj.curr,index);
                    }
                }
            }
        });
    }

    /**
     * 按博客类型或者日期进行分页查询
     * @param blog
     */
    function queryBlogByPage(blog,index) {
        axios.post("http://localhost:8081/kun/foreign/index/queryBlogByPage?index="+index,blog).then(res=>{
            total = res.data.data.totalNum;
            layuiPage(total,index);
            empty(res);
        });
    }

    function queryBlogBySelectPage(blog,current,index) {
        axios.post("http://localhost:8081/kun/foreign/index/queryBlogByPage?current="+current+"&index="+index,blog).then(res=>{
            empty(res);
        });
    }

    var vm = new Vue({
        el:"#app",
        data:{
            keyword: '',    //搜索关键字，如 java
            results: []  //搜索结果
        },
        created(){

        },
        methods:{
            searchKey() {
                //按下搜索按钮，将keyword值取出
                //从浏览器地址获取（搜索框双向绑定了 keyword，这里可以 this.keyword获取）
                //这里要用局部变量接受 this.keyword，不然这个变量无法传入下面的方法中
                var keyword = this.keyword;
                console.log(this.keyword);
                axios.post("http://localhost:8081",keyword).then(res=>{

                });
            }
        }
    })
})